{literal}
<script type="text/javascript">
$(document).ready(function() {
    $('#errorBed').html('');    
});
</script>
{/literal}
<div>
    <span id='errorBed'></span>
</div>
<div class='form_container' style='width:700px'>
    <!-- Form to create new bed -->
    <table>
        <tr>
            <td class='label'>{translate}Department{/translate}</td>
            <td>
                <select name='roomDepartment' id='roomDepartment' onChange="javascript:getRoomsSelect('roomDepartment', 'roomOfBed');">
                    <option id='empty' value='empty'>{translate}Select department{/translate}</option>
                </select>
            </td>
            <td class="btn" rowspan="5" width="100px">
                <div>
                    <a class='imgBtn'>
                        <img id='addBed' title='{translate}Add bed{/translate}' src="../images/add.png"/>
                    </a>
                </div>
            </td>            
        </tr>
        <tr>
            <td class='label'>{translate}Room{/translate}</td>
            <td>
                <select name='roomOfBed' id='roomOfBed'>
                    <option id='empty' value='empty'>{translate}Select room{/translate}</option>
                </select>
            </td>            
        </tr>
        <tr>
            <td class='label'>{translate}Bed code{/translate} (*)</td>
            <td><input type="text" id="bedCode"></td>
        </tr>
        <tr>
            <td class='label'>{translate}Maximum of patients{/translate}</td>
            <td>
                <select name='maxPatients' id='maxPatients' style="width:50px">                                       
                </select>
            </td>
        </tr>
        <tr>
            <td class='label'>{translate}Price{/translate} (*)</td>
            <td>
                <input type="text" id="price">
                <select name='bedPriceType' id='bedPriceType' style="width:70px">
                </select>
            </td>            
        </tr>        
    </table>
</div>

<br><br>

<!-- List of beds -->
<div>
	<table style='width:720px'>
		<caption>{translate}List of beds{/translate}</caption>
        <tr>
            <td class='label'>{translate}Department{/translate}</td>
            <td>
                <select id='filterRoomDepartment' onChange="javascript:getRoomsSelect('filterRoomDepartment', 'filterRoomOfBed');"></select>
            </td>
            <td class='label'>{translate}Room{/translate}</td>
            <td>
                <select id='filterRoomOfBed'></select>
            </td>
            <td class="btn" width="100px">
                <a class='imgBtn'>
                    <img id='searchBed' title='{translate}List{/translate}' src="../images/search.png"/>
                </a>
            </td>
        </tr>
    </table>
    <table id='bedTable' cellspacing='0' cellpadding='0' class='grid' style='min-width:720px; max-width:800px'>
        <thead>
            <tr>
                <th class="first">{translate}Department{/translate}</th>
                <th>{translate}Room{/translate}</th>
                <th style='max-width:15em'>{translate}Bed code{/translate}</th>
                <th style='max-width:10em'>{translate}Maximum of patients{/translate}</th>
                <th style='max-width:10em'>{translate}Price{/translate}</th>
                <th>{translate}Status{/translate}</th>
                <th class="last" colspan=3>{translate}Act{/translate}</th>                
            </tr>
        </thead>
        <tbody>        
        </tbody>
    </table>
</div>